<template>
  <div class="about">
    <h1>This is an about pages</h1>
    <input type="text" v-focushu>
    <p>{{showName.userSite}}</p>
    <p>{{serverSrc()}}</p>
    <a>{{nameLink}}</a>
    <AppLogin></AppLogin>
    <AppRegister></AppRegister>
    <div class="img-box">
      <div v-for="item in imgList" :key="item.id" v-backgroundImg="item.url"></div>
    </div>
  </div>
</template>
<script>
export default {
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter", this);
    next(vm => {
      console.log("after enter vm.id is ", vm);
    });
  },
  beforeRouteUpdate(to, from, next) {
    console.log("beforeRouteUpdate");
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave");
    next();
  },
  computed: {
    nameLink: function() {
      return this.serverSrc();
    }
  },
  data() {
    return {
      imgList: [
        {
          id: 1,
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531911011687&di=c6e32c42885a469334bc8c3d1847a986&imgtype=0&src=http%3A%2F%2Fpic9.photophoto.cn%2F20081229%2F0034034829945374_b.jpg"
        },
        {
          id: 2,
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531911011687&di=01221af9e1955f590f0e6eb0e0233c48&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140415%2F0005018701019570_b.jpg"
        },
        {
          id: 3,
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531911011687&di=680be4b52c1b32627546ee33e9d7e9f4&imgtype=0&src=http%3A%2F%2Fpic9.photophoto.cn%2F20081128%2F0033033999061521_b.jpg"
        }
      ]
    };
  }
};
</script>
<style lang="scss" >
.img-box {
  width: 900px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  justify-content: space-around;
  margin-bottom: 200px;
  & > div {
    width: 300px;
  }
}
</style>